<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        // 构造函数
        function Foo() {
            // 全局变量
                // 如果Foo没有执行
                // 下面赋值行为肯定不进行
            getName = function () {
                console.log(1);
            };
            return this; // windows
        };
        //  函数Foo上的静态方法 -> 一个函数对象上的方法/树形
        Foo.getName = function () {
            console.log(2);
        }
        // 扩展函数原型上的方法
        // var foo = new Foo() -> foo.getName
        // new Foo().getName
        Foo.prototype.getName = function () {
            console.log(3);
        };

        // 给全局变量赋值为一个匿名函数
        // GO {}
        /*
            GO {
                getName:
                undefined -> 
                function getName () {} ->
                function () { console.log(4) }
            }
        */
        var getName = function () {
            console.log(4);
        };
        // 函数声明
        function getName() {
            console.log(5);
        }


        // 执行Foo函数上的静态声明方式
        Foo.getName();  // 2

        getName();  // 5 -> 4 this=>windows

        // Foo返回值上的方法
        // Foo() -> this -> window -> window.getName() 
        Foo().getName(); // 5 -> 1

        // window.getName() -> 1 -> getName() -> 1
        getName(); // 1

        // Foo.getName() -> conole.log(2) -> 2
        new Foo.getName (); // 2

        // Foo.getName() -> console.log(2) -> 2
        new Foo().getName(); // 3
        new new Foo().getName(); // 3
    
      </script>
  <!-- <script>
    function Foo() {
        getName = function () {
            console.log(1);
        };
        console.log(this)
        return this;
    };
    Foo.getName = function () {
        console.log(2);
    }
    Foo.prototype.getName = function () {
        console.log(3);
    };
    var getName = function () {
        console.log(4);
    };

    function getName() {
        console.log(5);
    }
    
    Foo.getName();  // 2
    getName();  // 5 -> 4 this=>windows
    Foo().getName(); // 5 -> 1
    getName(); // 1
    new Foo.getName (); // 2
    new Foo().getName(); // 3
    new new Foo().getName(); // 3

  </script> -->
</body>
</html>